<template>
  <div class="menu">
    <div
      class="item clickScale"
      :title="item.label"
      v-for="item of menus"
      :key="item.label + item.value"
      :style="{ backgroundImage: $gbUrl($imgCatelog.sys.btn[item.img]) }"
      @click="handleClickMenu(item)"
    ></div>
  </div>
  <AttrsDialog ref="AttrsDialog"></AttrsDialog>
  <PackDialog ref="PackDialog"></PackDialog>
  <StoreDialog ref="StoreDialog"></StoreDialog>
  <TowerDialog ref="TowerDialog" @startBattle="startBattle"></TowerDialog>
</template>
<script lang="ts">
import { useStore } from "@/store";
import { MutationTypes } from "@/store/player/mutation-types";
import { defineComponent, reactive, ref } from "vue";
import { menuList } from "../options";
export default defineComponent({
  emits: {
    startBattle: (payload: any) => {
      return payload;
    }
  },
  setup(_: any, { emit }: { emit: any }) {
    const store = useStore();
    const AttrsDialog = ref();
    const PackDialog = ref();
    const StoreDialog = ref();
    const TowerDialog = ref();
    const menus = reactive(menuList);
    const handleClickMenu = ({ value }: any) => {
      switch (value) {
        case "attrs":
          AttrsDialog.value.open();
          break;
        case "equip": {
          // TODO:
          break;
        }
        case "pack":
          PackDialog.value.open();
          break;
        case "shop":
          StoreDialog.value.open();
          break;
        case "tower":
          TowerDialog.value.open();
          break;
        case "save": {
          store.commit(MutationTypes.MIGRATION_USER_INFO);
          break;
        }
        default:
          console.log("无效操作");
          break;
      }
    };
    const startBattle = async (row: any, option: any) => {
      // eslint-disable-next-line vue/custom-event-name-casing
      emit("startBattle", row, option);
    };
    return {
      menus,
      AttrsDialog,
      PackDialog,
      StoreDialog,
      TowerDialog,
      handleClickMenu,
      startBattle
    };
  }
});
</script>
<style lang="scss" scoped>
.menu {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  bottom: 5px;
  height: 80px;
  display: flex;
  align-items: center;
  .item {
    margin-left: 20px;
    width: 60px;
    height: 60px;
    background-position: center center;
    background-size: 75px 75px;
    border-radius: 20px;
    cursor: pointer;
  }
}
</style>
